<template>
	<view class="con flex-align-center">
		<view class="minus flex-center" @click="minus">
			<u-icon name="minus" color="#999999" size="24"></u-icon>
		</view>
		<view class="number">
			<input type="number" :disabled="disabledInput || disabled" v-model="inputVal" />
		</view>
		<view class="plus flex-center" @click="plus">
			<u-icon name="plus" color="#FFFFFF" size="24"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'b-number-box',
		props: {
			// 预显示的数字
			value: {
				type: Number,
				default: 1
			},
			// 最小值
			min: {
				type: Number,
				default: 1
			},
			// 步进值，每次加或减的值
			step: {
				type: Number,
				default: 1
			},
			// 最大值
			max: {
				type: Number,
				default: 99
			},
			// 是否禁用输入框，与disabled作用于输入框时，为OR的关系，即想要禁用输入框，又可以加减的话
			// 设置disabled为false，disabledInput为true即可
			disabledInput: {
				type: Boolean,
				default: true
			},
			// 是否禁用加减操作
			disabled: {
				type: Boolean,
				default: false
			},
		},
		watch: {
			value(v1, v2) {
				// 只有value的改变是来自外部的时候，才去同步inputVal的值，否则会造成循环错误
				if(!this.changeFromInner) {
					this.inputVal = v1;
					// 因为inputVal变化后，会触发this.handleChange()，在其中changeFromInner会再次被设置为true，
					// 造成外面修改值，也导致被认为是内部修改的混乱，这里进行this.$nextTick延时，保证在运行周期的最后处
					// 将changeFromInner设置为false
					this.$nextTick(function() {
						this.changeFromInner = false;
					})
				}
			},
			inputVal(v1, v2) {
				// 为了让用户能够删除所有输入值，重新输入内容，删除所有值后，内容为空字符串
				if (v1 == '') return;
				let value = 0;
				// 首先判断是否数值，并且在min和max之间，如果不是，使用原来值
				let tmp = uni.$u.test.number(v1);
				if (tmp && v1 >= this.min && v1 <= this.max) value = v1;
				else value = v2;
				// 判断是否只能输入大于等于0的整数
				// if(this.positiveInteger) {
					// 小于0，或者带有小数点，
					if(v1 < 0 || String(v1).indexOf('.') !== -1) {
						value = v2;
						// 双向绑定input的值，必须要使用$nextTick修改显示的值
						this.$nextTick(() => {
							this.inputVal = v2;
						})
					}
				// }
				// 发出change事件
				this.$emit('change', value);
				this.$emit('input', Number(value));
			}
		},
		data() {
			return {
				inputVal: 1, // 输入框中的值，不能直接使用props中的value，因为应该改变props的状态
				changeFromInner: false, // 值发生变化，是来自内部还是外部
			}
		},
		created() {
			this.inputVal = Number(this.value);
		},
		methods: {
			minus() {
				this.inputVal -= this.step;
				if(this.inputVal <= this.min) {
					this.inputVal = this.min;
				}
				this.$emit('minus', this.inputVal);
			},
			plus() {
				this.inputVal += this.step;
				if(this.inputVal >= this.max) {
					this.inputVal = this.max;
				}
				this.$emit('plus', this.inputVal);
			},
		},
	}
</script>

<style lang="scss" scoped>
	.con {
		
		.minus, .plus {
			width: 36rpx;
			height: 36rpx;
			border-radius: 8rpx;
		}
		
		.minus {
			background: #E1E1E1;
		}
		
		.plus {
			background: $uni-color-theme;
		}
		
		.number {
			
			input {
				font-size: 28rpx;
				width: 60rpx;
				height: 36rpx;
				color: #111111;
				font-weight: bold;
				text-align: center;
			}
		}
	}
</style>
